<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./static/font/iconfont.css">
    <link rel="stylesheet" href="./static/font1/iconfont.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/ticket.css">
    <title>QQ音乐票务</title>
</head>

<body>
    <!-- 头部 -->
    <header class="header w100">
        <div class="header-box w1600">
            <div class="header-nav">
                <div class="logo">
                    <a href="" class="logo-a">
                        <img src="images/logo.png" alt="" class="logo-pic">
                    </a>
                </div>
                <nav class="mainnav">
                    <ul class="mainnav-ul">
                        <li class="mainnav-li active">
                            <a href="" class="mainnav-a">音乐馆</a>
                        </li>
                        <li class="mainnav-li">
                            <a href="" class="mainnav-a">我的音乐</a>
                        </li>
                        <li class="mainnav-li mainnav-pop">
                            <a href="" class="mainnav-a">客户端
                                <img src="images/mark_1.png" alt="" class="mainnav-img">

                            </a>
                            <div class="pop-box">
                                <div class="pop-up">
                                    <ul class="pop-up-list">
                                        <li class="pop-up-items">
                                            <i class="pop-bg pop-up1"></i>
                                            <span class="pop-text">HQ高品质 全员开启</span>
                                        </li>
                                        <li class="pop-up-items">
                                            <i class="pop-bg pop-up2"></i>
                                            <span class="pop-text">独家音效 全面升级</span>
                                        </li>
                                        <li class="pop-up-items">
                                            <i class="pop-bg pop-up3"></i>
                                            <span class="pop-text">轻盈视觉 动态皮肤</span>
                                        </li>
                                        <li class="pop-up-items">
                                            <a href="" class="pop-update">下载体验</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </li>
                        <li class="mainnav-li">
                            <a href="" class="mainnav-a">开放平台</a>
                        </li>
                        <li class="mainnav-li">
                            <a href="" class="mainnav-a">VIP</a>
                        </li>
                    </ul>
                </nav>
                <!-- 搜索框 -->
                <div class="search">
                    <form action="">
                        <button class="btn-search"></button>
                        <input type="text" class="inp-search" name="keywords" id="keywords" autocomplete="off"
                            placeholder="搜索音乐、MV、歌单、用户">
                        <div class="search-box">
                            <div class="search-menu">
                                <ul class="search-list">
                                    <li class="search-items">
                                        <a href="" class="search-links">
                                            <span class="num">1</span>
                                            <p class="search-info">我们的歌</p>
                                            <span class="count">76.5</span>
                                        </a>
                                    </li>
                                    <li class="search-items">
                                        <a href="" class="search-links">
                                            <span class="num">2</span>
                                            <p class="search-info">红尘客栈</p>
                                            <span class="count">176.5</span>
                                        </a>
                                    </li>
                                    <li class="search-items">
                                        <a href="" class="search-links">
                                            <span class="num">3</span>
                                            <p class="search-info">水星记</p>
                                            <span class="count">100.9</span>
                                        </a>
                                    </li>
                                    <li class="search-items">
                                        <a href="" class="search-links">
                                            <span class="num">4</span>
                                            <p class="search-info">林俊杰</p>
                                            <span class="count">44.5</span>
                                        </a>
                                    </li>
                                    <li class="search-items">
                                        <a href="" class="search-links">
                                            <span class="num">5</span>
                                            <p class="search-info">错位时空</p>
                                            <span class="count">106.5</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </form>
                </div>
                <!-- 用户功能 -->
                <div class="user-functions">
                    <a href="" class="login">登录</a>
                    <div class="user-menu menu-vip menu-list">
                        <span class="menu-content">开通VIP</span>
                        <div class="drop-menu">
                            <a href="" class="drop-menu-links">开通绿钻豪华版</a>
                            <a href="" class="drop-menu-links">开通付费包</a>
                        </div>
                    </div>
                    <div class="user-menu menu-money menu-list">
                        <span class="menu-content">充值</span>
                        <div class="drop-menu">
                            <a href="" class="drop-menu-links">购买乐币</a>
                            <a href="" class="drop-menu-links">充值饭票</a>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 子导航 -->
            <div class="subnav">
                <ul class="subnav-list">
                    <li class="subnav-items ">
                        <a href="QQ.html" class="subnav-links">首页</a>
                    </li>
                    <li class="subnav-items">
                        <a href="singer.html" class="subnav-links">歌手</a>
                    </li>
                    <li class="subnav-items">
                        <a href="Newdisc.html" class="subnav-links">新碟</a>
                    </li>
                    <li class="subnav-items ">
                        <a href="top.html" class="subnav-links">排行榜</a>
                    </li>
                    <li class="subnav-items">
                        <a href="classify.html" class="subnav-links">分类歌单</a>
                    </li>
                    <li class="subnav-items">
                        <a href="MV.html" class="subnav-links">MV</a>
                    </li>
                    <li class="subnav-items">
                        <a href="radio.html" class="subnav-links">电台</a>
                    </li>
                    <li class="subnav-items">
                        <a href="Album.html" class="subnav-links">数字专辑</a>
                    </li>
                    <li class="subnav-items active">
                        <a href="ticket.html" class="subnav-links">票务</a>
                    </li>
                </ul>
            </div>
        </div>
    </header>
    <!-- 主体 -->
    <main class="main w100">
        <!-- 横幅 -->
        <section class="section w100">
            <div class="section-box w1600">
                <!-- banner 图 -->
                <div class="ticket-banner-box">
                    <ul class="ticket-banner-ul">
                        <li class="ticket-banner-li">
                            <a href="" class="ticket-banner-a">
                                <img src="images/ticket/banner/b1.webp" alt="" class="ticket-banner-pic">
                            </a>
                        </li>
                        <li class="ticket-banner-li">
                            <a href="" class="ticket-banner-a">
                                <img src="images/ticket/banner/b2.webp" alt="" class="ticket-banner-pic">
                            </a>
                        </li>
                        <li class="ticket-banner-li">
                            <a href="" class="ticket-banner-a">
                                <img src="images/ticket/banner/b3.webp" alt="" class="ticket-banner-pic">
                            </a>
                        </li>
                    </ul>
                    <div class="section-pagebar">
                        <ul class="pagebar-ul">
                            <a href="" class="pagebar-links">
                                <li class="pagebar-li active"></li>
                            </a>
                            <a href="" class="pagebar-links">
                                <li class="pagebar-li"></li>
                            </a>
                            <a href="" class="pagebar-links">
                                <li class="pagebar-li"></li>
                            </a>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 左右按钮 -->
            <div class="btn-page btn-prev">
                <a href="" class="btn-page-link">
                    <i class="btn-iconfont iconfont-prev"></i>
                </a>
            </div>
            <div class="btn-page btn-next">
                <a href="" class="btn-page-link ">
                    <i class="btn-iconfont iconfont-next"></i>
                </a>
            </div>
        </section>
        <!-- 城市 -->
        <section class="section w100 sectionbgwhite ticket-choice">
            <div class="section-wrapper w1600 pr">
                <div class="ticket-search">
                    <div class="ticket-city">
                        <span class="ticket-city-checked vm">成都</span>
                        <i class="arrow-down vm"></i>
                        <div class="city-wrapper">
                            <div class="city-currentwrapper">
                                <div class="city-current mb20">
                                    <span>当前城市</span>
                                    <p><a href="#" class="city-checked">成都</a></p>
                                </div>
                                <div class="city-hot">
                                    <span>热门城市</span>
                                    <p>
                                        <a href="#" class="city-name">全国</a>
                                        <a href="#" class="city-name">北京</a>
                                        <a href="#" class="city-name">上海</a>
                                        <a href="#" class="city-name">广州</a>
                                        <a href="#" class="city-name">深圳</a>
                                        <a href="#" class="city-name">成都</a>
                                        <a href="#" class="city-name">武汉</a>
                                    </p>
                                </div>
                            </div>
                            <p>按字母查找</p>
                            <ul class="city-letters">
                                <li class="active"><a href="#" class="city-letter">A</a></li>
                                <li><a href="#" class="city-letter">B</a></li>
                                <li><a href="#" class="city-letter">C</a></li>
                                <li><a href="#" class="city-letter">D</a></li>
                                <li><a href="#" class="city-letter">E</a></li>
                                <li><a href="#" class="city-letter">F</a></li>
                                <li><a href="#" class="city-letter">G</a></li>
                                <li><a href="#" class="city-letter">H</a></li>
                                <li><a href="#" class="city-letter">I</a></li>
                                <li><a href="#" class="city-letter">J</a></li>
                                <li><a href="#" class="city-letter">K</a></li>
                                <li><a href="#" class="city-letter">L</a></li>
                                <li><a href="#" class="city-letter">M</a></li>
                                <li><a href="#" class="city-letter">N</a></li>
                                <li><a href="#" class="city-letter">O</a></li>
                                <li><a href="#" class="city-letter">P</a></li>
                                <li><a href="#" class="city-letter">Q</a></li>
                                <li><a href="#" class="city-letter">R</a></li>
                                <li><a href="#" class="city-letter">S</a></li>
                                <li><a href="#" class="city-letter">T</a></li>
                                <li><a href="#" class="city-letter">U</a></li>
                                <li><a href="#" class="city-letter">V</a></li>
                                <li><a href="#" class="city-letter">W</a></li>
                                <li><a href="#" class="city-letter">X</a></li>
                                <li><a href="#" class="city-letter">Y</a></li>
                                <li><a href="#" class="city-letter">Z</a></li>
                            </ul>
                            <div class="city-listbox">
                                <ul class="city-lists">
                                    <li class="city-list">
                                        <span>A</span>
                                        <p>
                                            <a href="#" class="city-name">澳门</a>
                                        </p>
                                    </li>
                                    <li class="city-list">
                                        <span>B</span>
                                        <p>
                                            <a href="#" class="city-name">北京</a>
                                            <a href="#" class="city-name">包头</a>
                                            <a href="#" class="city-name">宝鸡</a>
                                        </p>
                                    </li>
                                    <li class="city-list">
                                        <span>C</span>
                                        <p>
                                            <a href="#" class="city-name">长春</a>
                                            <a href="#" class="city-name">常州</a>
                                            <a href="#" class="city-name">长沙</a>
                                            <a href="#" class="city-name">重庆</a>
                                            <a href="#" class="city-name">成都</a>
                                        </p>
                                    </li>
                                    <li class="city-list">
                                        <span>D</span>
                                        <p>
                                            <a href="#" class="city-name">大连</a>
                                            <a href="#" class="city-name">大庆</a>
                                            <a href="#" class="city-name">东莞</a>
                                            <a href="#" class="city-name">东方</a>
                                            <a href="#" class="city-name">大理</a>
                                        </p>
                                    </li>
                                    <li class="city-list">
                                        <span>F</span>
                                        <p>
                                            <a href="#" class="city-name">抚顺</a>
                                            <a href="#" class="city-name">阜阳</a>
                                            <a href="#" class="city-name">福州</a>
                                            <a href="#" class="city-name">佛山</a>
                                        </p>
                                    </li>
                                    <li class="city-list">
                                        <span>G</span>
                                        <p>
                                            <a href="#" class="city-name">广州</a>
                                            <a href="#" class="city-name">桂林</a>
                                            <a href="#" class="city-name">贵阳</a>
                                        </p>
                                    </li>
                                    <li class="city-list">
                                        <span>H</span>
                                        <p>
                                            <a href="#" class="city-name">呼和浩特</a>
                                            <a href="#" class="city-name">哈尔滨</a>
                                            <a href="#" class="city-name">杭州</a>
                                            <a href="#" class="city-name">湖州</a>
                                            <a href="#" class="city-name">合肥</a>
                                            <a href="#" class="city-name">黄山</a>
                                            <a href="#" class="city-name">菏泽</a>
                                            <a href="#" class="city-name">惠州</a>
                                            <a href="#" class="city-name">河源</a>
                                            <a href="#" class="city-name">海口</a>
                                        </p>
                                    </li>
                                    <li class="city-list">
                                        <span>J</span>
                                        <p>
                                            <a href="#" class="city-name">吉林</a>
                                            <a href="#" class="city-name">嘉兴</a>
                                            <a href="#" class="city-name">济南</a>
                                            <a href="#" class="city-name">焦作</a>
                                            <a href="#" class="city-name">江门</a>
                                        </p>
                                    </li>
                                    <li class="city-list">
                                        <span>K</span>
                                        <p>
                                            <a href="#" class="city-name">昆明</a>
                                        </p>
                                    </li>
                                    <li class="city-list">
                                        <span>L</span>
                                        <p>
                                            <a href="#" class="city-name">廊坊</a>
                                            <a href="#" class="city-name">洛阳</a>
                                            <a href="#" class="city-name">乐山</a>
                                            <a href="#" class="city-name">六盘水</a>
                                            <a href="#" class="city-name">丽江</a>
                                            <a href="#" class="city-name">拉萨</a>
                                            <a href="#" class="city-name">兰州</a>
                                        </p>
                                    </li>
                                    <li class="city-list">
                                        <span>M</span>
                                        <p>
                                            <a href="#" class="city-name">绵阳</a>
                                        </p>
                                    </li>
                                    <li class="city-list">
                                        <span>N</span>
                                        <p>
                                            <a href="#" class="city-name">南京</a>
                                            <a href="#" class="city-name">南通</a>
                                            <a href="#" class="city-name">宁波</a>
                                            <a href="#" class="city-name">南平</a>
                                            <a href="#" class="city-name">南昌</a>
                                            <a href="#" class="city-name">南阳</a>
                                            <a href="#" class="city-name">南宁</a>
                                        </p>
                                    </li>
                                    <li class="city-list">
                                        <span>P</span>
                                        <p>
                                            <a href="#" class="city-name">莆田</a>
                                        </p>
                                    </li>
                                    <li class="city-list">
                                        <span>Q</span>
                                        <p>
                                            <a href="#" class="city-name">全国</a>
                                            <a href="#" class="city-name">泉州</a>
                                            <a href="#" class="city-name">青岛</a>
                                        </p>
                                    </li>
                                    <li class="city-list">
                                        <span>R</span>
                                        <p>
                                            <a href="#" class="city-name">日照</a>
                                        </p>
                                    </li>
                                    <li class="city-list">
                                        <span>S</span>
                                        <p>
                                            <a href="#" class="city-name">石家庄</a>
                                            <a href="#" class="city-name">沈阳</a>
                                            <a href="#" class="city-name">上海</a>
                                            <a href="#" class="city-name">苏州</a>
                                            <a href="#" class="city-name">深圳</a>
                                            <a href="#" class="city-name">三亚</a>
                                        </p>
                                    </li>
                                    <li class="city-list">
                                        <span>T</span>
                                        <p>
                                            <a href="#" class="city-name">天津</a>
                                            <a href="#" class="city-name">唐山</a>
                                            <a href="#" class="city-name">太原</a>
                                            <a href="#" class="city-name">台州</a>
                                            <a href="#" class="city-name">铜陵</a>
                                            <a href="#" class="city-name">泰安</a>
                                        </p>
                                    </li>
                                    <li class="city-list">
                                        <span>W</span>
                                        <p>
                                            <a href="#" class="city-name">无锡</a>
                                            <a href="#" class="city-name">温州</a>
                                            <a href="#" class="city-name">芜湖</a>
                                            <a href="#" class="city-name">潍坊</a>
                                            <a href="#" class="city-name">武汉</a>
                                            <a href="#" class="city-name">万宁</a>
                                            <a href="#" class="city-name">乌鲁木齐</a>
                                        </p>
                                    </li>
                                    <li class="city-list">
                                        <span>X</span>
                                        <p>
                                            <a href="#" class="city-name">徐州</a>
                                            <a href="#" class="city-name">厦门</a>
                                            <a href="#" class="city-name">新乡</a>
                                            <a href="#" class="city-name">襄阳</a>
                                            <a href="#" class="city-name">湘潭</a>
                                            <a href="#" class="city-name">西安</a>
                                            <a href="#" class="city-name">咸阳</a>
                                        </p>
                                    </li>
                                    <li class="city-list">
                                        <span>Y</span>
                                        <p>
                                            <a href="#" class="city-name">营口</a>
                                            <a href="#" class="city-name">盐城</a>
                                            <a href="#" class="city-name">烟台</a>
                                            <a href="#" class="city-name">榆林</a>
                                            <a href="#" class="city-name">银川</a>
                                        </p>
                                    </li>
                                    <li class="city-list">
                                        <span>Z</span>
                                        <p>
                                            <a href="#" class="city-name">镇江</a>
                                            <a href="#" class="city-name">舟山</a>
                                            <a href="#" class="city-name">漳州</a>
                                            <a href="#" class="city-name">淄博</a>
                                            <a href="#" class="city-name">郑州</a>
                                            <a href="#" class="city-name">株洲</a>
                                            <a href="#" class="city-name">中山</a>
                                            <a href="#" class="city-name">珠海</a>
                                            <a href="#" class="city-name">湛江</a>
                                            <a href="#" class="city-name">遵义</a>
                                        </p>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="ticket-keywords">
                        <input type="text" name="keywords" id="keywords" placeholder="搜索票务" autocomplete="off"
                            class="ticket-input">
                        <button class="btn-ticket-search"><i class="iconfont icon-search"></i></button>
                    </div>
                    <div class="more ticket-order">
                        <a class="more-a" href="#"><span>我的订单</span><i class="iconfont icon-gengduo"></i></a>
                    </div>
                </div>
            </div>
        </section>
        <!-- 分类 -->
        <section class="section w100 sectionbgwhite">
            <div class="section-wrapper w1600 pr">
                <ul class="ticket-menu">
                    <li class="ticket-menu-li active">
                        <a href="#" class="ticket-menu-a">
                            <i class="ticket-menu-icon ticket-menu-icon0"></i>
                            <h3 class="ticket-menu-h3">全部</h3>
                        </a>
                    </li>
                    <li class="ticket-menu-li">
                        <a href="#" class="ticket-menu-a">
                            <i class="ticket-menu-icon ticket-menu-icon1"></i>
                            <h3 class="ticket-menu-h3">演唱会</h3>
                        </a>
                    </li>
                    <li class="ticket-menu-li">
                        <a href="#" class="ticket-menu-a">
                            <i class="ticket-menu-icon ticket-menu-icon3"></i>
                            <h3 class="ticket-menu-h3">LiveHouse</h3>
                        </a>
                    </li>
                    <li class="ticket-menu-li">
                        <a href="#" class="ticket-menu-a">
                            <i class="ticket-menu-icon ticket-menu-icon4"></i>
                            <h3 class="ticket-menu-h3">音乐会</h3>
                        </a>
                    </li>
                    <li class="ticket-menu-li">
                        <a href="#" class="ticket-menu-a">
                            <i class="ticket-menu-icon ticket-menu-icon5"></i>
                            <h3 class="ticket-menu-h3">舞蹈芭蕾</h3>
                        </a>
                    </li>
                    <li class="ticket-menu-li">
                        <a href="#" class="ticket-menu-a">
                            <i class="ticket-menu-icon ticket-menu-icon6"></i>
                            <h3 class="ticket-menu-h3">话剧歌剧</h3>
                        </a>
                    </li>
                    <li class="ticket-menu-li">
                        <a href="#" class="ticket-menu-a">
                            <i class="ticket-menu-icon ticket-menu-icon7"></i>
                            <h3 class="ticket-menu-h3">其它演出</h3>
                        </a>
                    </li>
                </ul>
            </div>
        </section>
        <!-- 内容1 -->
        <section class="section w100">
            <div class="section-box w1600 pr">
                <h2 class="ticket-title">LiveHouse</h2>
                <div class="ticket-container">
                    <div class="ticket-maincover-box">
                        <a href="#" class="ticket-maincover-a">
                            <img src="images/ticket/content/c1.webp" class="ticket-maincover">
                            <div class="ticket-maincover-title">
                                <h3 class="ticket-maincover-h3">黑屋乐队2022巡演|保持热爱·共赴山海 成都站</h3>
                                <span class="ticket-price">¥ 68 <em class="ticket-price-em">起</em></span>
                            </div>
                        </a>
                    </div>
                    <div class="ticket-grid-box">
                        <a href="#" class="ticket-grid-a">
                            <div class="grid-pic-box">
                                <img src="images/ticket/content/Stp1.webp" class="ticket-grid-pic">
                            </div>
                            <div class="ticket-grid-title">
                                <p class="ticket-grid-text">2022音阙诗听小宇宙巡演 成都站</p>
                                <p class="ticket-grid-time">2022.07.22</p>
                                <p class="ticket-grid-time">CH8冇独空间（完美店）</p>
                                <p class="ticket-grid-price">¥ 168 <em class="ticket-price-em">起</em></p>
                            </div>
                        </a>
                    </div>
                    <div class="ticket-grid-box">
                        <a href="#" class="ticket-grid-a">
                            <div class="grid-pic-box">
                                <img src="images/ticket/content/Stp2.webp" class="ticket-grid-pic">
                            </div>
                            <div class="ticket-grid-title">
                                <p class="ticket-grid-text">⎡情绪出游⎦布朗尼2022夏季巡演 成都站</p>
                                <p class="ticket-grid-time">2022.08.06</p>
                                <p class="ticket-grid-time">成都 MAO Livehouse</p>
                                <p class="ticket-grid-price">¥ 130 <em class="ticket-price-em">起</em></p>
                            </div>
                        </a>
                    </div>
                    <div class="ticket-grid-box">
                        <a href="#" class="ticket-grid-a">
                            <div class="grid-pic-box">
                                <img src="images/ticket/content/Stp3.webp" class="ticket-grid-pic">
                            </div>
                            <div class="ticket-grid-title">
                                <p class="ticket-grid-text">沉默演讲【不稳定的规律 / 有序混沌】专场演出 成都站</p>
                                <p class="ticket-grid-time">2022.08.07</p>
                                <p class="ticket-grid-time">NUSPACE_纽空间</p>
                                <p class="ticket-grid-price">¥ 100 <em class="ticket-price-em">起</em></p>
                            </div>
                        </a>
                    </div>
                    <div class="ticket-grid-box">
                        <a href="#" class="ticket-grid-a">
                            <div class="grid-pic-box">
                                <img src="images/ticket/content/Stp4.webp" class="ticket-grid-pic">
                            </div>
                            <div class="ticket-grid-title">
                                <p class="ticket-grid-text">【秀动呈献】魏诗莹Wishbao《蓝色日暮》 2022夏季巡演 成都站</p>
                                <p class="ticket-grid-time">2022.08.12</p>
                                <p class="ticket-grid-time">成都 MAO Livehouse</p>
                                <p class="ticket-grid-price">¥ 100 <em class="ticket-price-em">起</em></p>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </section>
        <!-- 内容2 -->
        <section class="section w100">
            <div class="section-box w1600 pr">
                <h2 class="ticket-title">音乐会</h2>
                <div class="ticket-container">
                    <div class="ticket-maincover-box">
                        <a href="#" class="ticket-maincover-a">
                            <img src="images/ticket/content/c2.webp" class="ticket-maincover">
                            <div class="ticket-maincover-title">
                                <h3 class="ticket-maincover-h3">《永远同在》宫崎骏&久石让动漫作品视听音乐会</h3>
                                <span class="ticket-price">¥ 100 <em class="ticket-price-em">起</em>
                                    <i class="ticket-icon ticket-price-icon">赠送</i>
                                </span>
                            </div>
                        </a>
                    </div>
                    <div class="ticket-grid-box">
                        <a href="#" class="ticket-grid-a">
                            <div class="grid-pic-box">
                                <img src="images/ticket/content/Stp5.webp" class="ticket-grid-pic">
                            </div>
                            <div class="ticket-grid-title">
                                <p class="ticket-grid-text">【成都】遇见新海诚-2022帝玖[这次一定]室内乐团ACG音乐会</p>
                                <p class="ticket-grid-time">2022.07.02</p>
                                <p class="ticket-grid-time">成都城市音乐厅</p>
                                <p class="ticket-grid-price">¥ 80 <em class="ticket-price-em">起</em>
                                    <i class="ticket-icon ticket-grid-icon">赠送</i>
                                </p>
                            </div>
                        </a>
                    </div>
                    <div class="ticket-grid-box">
                        <a href="#" class="ticket-grid-a">
                            <div class="grid-pic-box">
                                <img src="images/ticket/content/Stp6.webp" class="ticket-grid-pic">
                            </div>
                            <div class="ticket-grid-title">
                                <p class="ticket-grid-text">【预售】谭盾·武侠三部曲</p>
                                <p class="ticket-grid-time">2022.07.16</p>
                                <p class="ticket-grid-time">成都城市音乐厅</p>
                                <p class="ticket-grid-price">¥ 80 <em class="ticket-price-em">起</em>
                                    <i class="ticket-icon ticket-grid-icon">赠送</i>
                                </p>
                            </div>
                        </a>
                    </div>
                    <div class="ticket-grid-box">
                        <a href="#" class="ticket-grid-a">
                            <div class="grid-pic-box">
                                <img src="images/ticket/content/Stp7.webp" class="ticket-grid-pic">
                            </div>
                            <div class="ticket-grid-title">
                                <p class="ticket-grid-text">柴可夫斯基三大经典 《天鹅湖》《睡美人》《胡桃夹子》交响音乐会--需要核酸</p>
                                <p class="ticket-grid-time">2022.08.05</p>
                                <p class="ticket-grid-time">成都城市音乐厅</p>
                                <p class="ticket-grid-price">¥ 180 <em class="ticket-price-em">起</em>
                                    <i class="ticket-icon ticket-grid-icon">赠送</i>
                                </p>
                            </div>
                        </a>
                    </div>
                    <div class="ticket-grid-box">
                        <a href="#" class="ticket-grid-a">
                            <div class="grid-pic-box">
                                <img src="images/ticket/content/Stp8.webp" class="ticket-grid-pic">
                            </div>
                            <div class="ticket-grid-title">
                                <p class="ticket-grid-text">“百老汇”经典音乐剧&世界经典名曲交响音乐会--需要核酸</p>
                                <p class="ticket-grid-time">2022.08.13</p>
                                <p class="ticket-grid-time">成都城市音乐厅</p>
                                <p class="ticket-grid-price">¥ 180 <em class="ticket-price-em">起</em>
                                    <i class="ticket-icon ticket-grid-icon">赠送</i>
                                </p>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </section>
    </main>
    <!-- footer -->
    <footer class="footer w100">
        <div class="footer-wrapper w1600">
            <div class="footer-box">
                <!-- 下载客户端 -->
                <div class="footer-update">
                    <h5 class="footer-title">下载QQ音乐客户端</h5>
                    <ul class="update-list">
                        <li class="update-items">
                            <a href="" class="update-links">
                                <i class="update-bg bg1"></i>
                                PC版
                            </a>
                        </li>
                        <li class="update-items">
                            <a href="" class="update-links">
                                <i class="update-bg bg2"></i>
                                Mac版
                            </a>
                        </li>
                        <li class="update-items">
                            <a href="" class="update-links">
                                <i class="update-bg bg3"></i>
                                Android版
                            </a>
                        </li>
                        <li class="update-items">
                            <a href="" class="update-links">
                                <i class="update-bg bg4"></i>
                                iPhone版
                            </a>
                        </li>
                    </ul>
                </div>
                <!-- 特色产品 -->
                <div class="footer-product">
                    <h5 class="footer-title">特色产品</h5>
                    <ul class="update-list ">
                        <li class="update-items">
                            <a href="" class="update-links">
                                <i class="update-bg bg5"></i>
                                全民K歌
                            </a>
                        </li>
                        <li class="update-items">
                            <a href="" class="update-links">
                                <i class="update-bg bg6"></i>
                                银河音效
                            </a>
                        </li>
                        <li class="update-items">
                            <a href="" class="update-links">
                                <i class="update-bg bg7"></i>
                                QPlay
                            </a>
                        </li>
                        <li class="update-items">
                            <a href="" class="update-links">
                                <i class="update-bg bg8"></i>
                                Fan直播伴侣
                            </a>
                        </li>
                        <li class="update-items">
                            <a href="" class="update-links">
                                车载互联
                            </a>
                        </li>
                        <li class="update-items">
                            <a href="" class="update-links">
                                QQ演出
                            </a>
                        </li>
                    </ul>
                </div>
                <!-- 合作链接 -->
                <div class="footer-coolink">
                    <h5 class="footer-title">合作链接</h5>
                    <div class="footer-coolink-box">
                        <a href="" class="footer-box-links">CJ ENM</a>
                        <a href="" class="footer-box-links">腾讯视频</a>
                        <a href="" class="footer-box-links">手机QQ空间</a>
                        <a href="" class="footer-box-links">最新版QQ</a>
                        <a href="" class="footer-box-links">腾讯社交广告</a>
                        <a href="" class="footer-box-links">电脑管家</a>
                        <a href="" class="footer-box-links">QQ浏览器</a>
                        <a href="" class="footer-box-links">腾讯微云</a>
                        <a href="" class="footer-box-links">腾讯云</a>
                        <a href="" class="footer-box-links">企鹅FM</a>
                        <a href="" class="footer-box-links">智能电视网</a>
                        <a href="" class="footer-box-links">当贝市场</a>
                        <a href="" class="footer-box-links">酷我音乐</a>
                        <a href="" class="footer-box-links">酷狗听书</a>
                    </div>
                </div>
                <!-- 开放平台 -->
                <div class="footer-coolink">
                    <h5 class="footer-title">开放平台</h5>
                    <div class="footer-coolink-box">
                        <a href="" class="footer-box-links">QQ音乐开放平台</a>
                        <a href="" class="footer-box-links">腾讯音乐人</a>
                        <a href="" class="footer-box-links">音乐推</a>
                    </div>
                </div>
                <!-- TME集团官网 -->
                <div class="footer-coolink">
                    <h5 class="footer-title">TME集团官网</h5>
                    <div class="footer-coolink-box">
                        <a href="" class="footer-box-links">腾讯音乐</a>
                    </div>
                </div>
            </div>
            <div class="footer-coopyright">
                <div class="coopyright-item">
                    <a href="" class="footer-box-links">关于腾讯 |</a>
                    <a href="" class="footer-box-links">About Tencent |</a>
                    <a href="" class="footer-box-links">服务条款 |</a>
                    <a href="" class="footer-box-links">用户服务协议 |</a>
                    <a href="" class="footer-box-links">隐私政策 |</a>
                    <a href="" class="footer-box-links">权利声明 |</a>
                    <a href="" class="footer-box-links">广告服务 |</a>
                    <a href="" class="footer-box-links">腾讯招聘 |</a>
                    <a href="" class="footer-box-links">客服中心 |</a>
                    <a href="" class="footer-box-links">网站导航</a>
                </div>
                <div class="coopyright-item">
                    Copyright © 1998 - 2022 Tencent.
                    <a href="" class="footer-box-links">All Rights Reserved.</a>
                </div>
                <div class="coopyright-item">
                    腾讯公司
                    <a href="" class="footer-box-links"> 版权所有 |</a>
                    <a href="" class="footer-box-links">营业执照 |</a>
                    网络文化经营许可证：
                    <a href="" class="footer-box-links">粤网文[2020]3396-195号 |</a>
                    客服电话:
                    <a href="" class="footer-box-links">4006016666</a>
                </div>
            </div>
        </div>
    </footer>
    <!-- 侧边栏 -->
    <aside class="side">
        <a href="" class="side-links">
            <i class="side-bg"></i>
        </a>
        <a href="" class="side-links">反馈</a>
        <a href="" class="side-links">
            <i class="side-bg music"></i>
        </a>
    </aside>
    <!-- 弹出指南 -->
    <div class="popup-guide">
        <img src="images/logo.png" alt="" class="popup-guide-pic">
        <p class="popup-guide-info">千万高品质曲库尽享</p>
        <a href="" class="popup-guide-a">
            <i class="popup-guide-icon"></i>
            <i class="popup-guide-text">客户端下载</i>
        </a>
    </div>

</body>

</html>